<template>
	<view class="account-container">
		<uni-forms :modelValue="formData" label-width="80px" ref="form" label-align="center">
			<uni-forms-item label="昵称:" name="nickname" required="true">
				<uni-easyinput placeholderStyle="color:#ccc;font-size:28rpx;" type="text" v-model="formData.nickname"
					placeholder="请输入昵称" trim="true" :styles="{borderRadius:'20rpx'}">
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="账号:" name="loginId" required="true">
				<uni-easyinput placeholderStyle="color:#ccc;font-size:28rpx;" type="text" v-model="formData.loginId"
					placeholder="请输入账号" trim="true" :styles="{borderRadius:'20rpx'}">
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="密码:" name="loginPwd" required="true">
				<uni-easyinput placeholderStyle="color:#ccc; font-size:28rpx;" type="password"
					v-model="formData.loginPwd" placeholder="请输入密码" trim="true" :styles="{borderRadius:'20rpx'}">
				</uni-easyinput />
			</uni-forms-item>
			<uni-forms-item label="确认密码:" name="resetPwd" required="true">
				<uni-easyinput placeholderStyle="color:#ccc; font-size:28rpx;" type="password"
					v-model="formData.resetPwd" placeholder="请确认您的密码" trim="true" :styles="{borderRadius:'20rpx'}">
				</uni-easyinput />
			</uni-forms-item>
		</uni-forms>
		<!-- 单选框的实现 -->
		<radio-group class="value checked" style="font-size: 28rpx;" @change="radioChange">
			<label class="radio">
				<radio :value="0" :checked="formData.role === 0" />个人
			</label>
			<label class="radio" style="margin-left: 15%;">
				<radio :value="1" :checked="formData.role === 1" />企业
			</label>
		</radio-group>
		<button class="btn" @click="getAccount">提交注册</button>
	</view>
</template>

<script>
	import {
		getAccount
	} from "../../ajax/api/login.js";
	import {
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				formData: {
					nickname: "", //昵称
					loginId: "", //账号
					loginPwd: "", //密码
					resetPwd: "", //重复的密码
					role: 0,
				},
				rules: {
					nickname: {
						rules: [{
							required: true,
							errorMessage: '请填写用户昵称',
						}]
					},
					loginId: {
						rules: [{
							required: true,
							errorMessage: '请填写账号名',
						}]
					},
					loginPwd: {
						rules: [{
							required: true,
							errorMessage: '请填写密码',
						}, {
							// 对密码长度进行限制
							minLength: 6,
							maxLength: 18,
							errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
						}]
					},
					resetPwd: {
						rules: [{
							required: true,
							errorMessage: '请确认密码',
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (value !== this.formData.loginPwd) {
									callback("输入的密码不一致")
								} else {
									callback();
								}
							}
						}]
					}
				},
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			...mapMutations(["updateUserInfo"]),
			radioChange(e) {
				this.formData.role = +e.detail.value;
			},
			// 注册账号
			getAccount() {
				this.$refs.form.validate().then(async (res) => {
					// 表单验证通过
					const result = await getAccount({
						nickname: this.formData.nickname,
						loginId: this.formData.loginId,
						loginPwd: this.formData.loginPwd,
						role: this.formData.role
					})
					if (result) {
						uni.showToast({
							title: "用户注册成功",
							icon: "none"
						})
						setTimeout(() => {
							if (this.formData.role === 0) {
								// 个人
								uni.navigateTo({
									url:"/pages/login/login",
								})
							}else{
								// 企业
								uni.navigateTo({
									url:"/pages/login/login",
								})
							}
						}, 500)
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background: url("");
		background-size: 100% 100%;
	}
</style>
<style lang="scss" scoped>
	@import "./css/account.scss";
</style>
